@import "../css/reset.css";

@color-white: #ffffff;
@color-green: #188B74;
@color-green-font: #20C375;
@color-green-side: #1BBC9B;
@green-dress: #2CC983;
@green-radius: #1BBC9B;
@green-button: #40AF97;
@border-radius: 35 * @unit;
@color-grey: #B0B7C0;
@border-grey: #BBB;
@bg-grey: #F5F5F5;
@font-grey: #B3B3B3;
@small-grey: #9E9E9E;
;
@num-grey: #777;
@page-grey: #c3c3c3;
@footer-grey: #808080;
@footer-grey: #808080;
@mobile-box: #E6E6E6;

@unit: 100vw / 1440;

.clear:after {
  content: "";
  display: block;
  clear: both;
}

html, body {
  width: 100vw;
  height: 100%;
  position: relative;
}

nav {
  width: 100vw;
  overflow-x: hidden;
  height: 170 * @unit;
  color: @color-green-side;
  float: left;
  font-size: 60 * @unit;
  position: fixed;
  z-index: 999;
  background-color: @color-white;
  top: 0;
  left: 0;
  #logo {
    display: inline-block;
    float: left;
    background: url("http://image.cheerby.cn/appImage/mobile/logo.png") no-repeat;
    background-size: contain;
    width: 230 * @unit;
    height: 66 * @unit;
    margin: 52 * @unit 35 * @unit 52 * @unit 55 * @unit;
  }
  .split {
    margin-right: 30 * @unit;
    line-height: 170 * @unit;
    float: left;
  }
  #right-bar {
    li {
      float: left;
      font-size: 60 * @unit;
      height: 170 * @unit;
      line-height: 170 * @unit;
      width: 170 * @unit;
      display: inline-block;
      text-align: center;
      &.active {
        color: @color-white;
        background-color: @color-green-side;
      }
    }
  }
}

.icon {
  color: @num-grey;
  height: 60 * @unit;
  vertical-align: middle;
  font-size: 35 * @unit;
  display: inline-block;
  margin-right: 20 * @unit;
  .icons {
    display: inline-block;
    &.agree {
      background: url("http://image.cheerby.cn/appImage/mobile/4.png") no-repeat;
      width: 66 * @unit;
      height: 46 * @unit;
      background-size: contain;

    }
    &.read {
      background: url("http://image.cheerby.cn/appImage/mobile/1.png") no-repeat;
      width: 66 * @unit;
      height: 35 * @unit;
      margin-right: 20 * @unit;
      background-size: contain;
    }
    &.comment {
      background: url("http://image.cheerby.cn/appImage/mobile/2.png") no-repeat;
      width: 66 * @unit;
      height: 46 * @unit;
      background-size: contain;
    }
    &.share {
      background: url("http://image.cheerby.cn/appImage/mobile/3.png") no-repeat;
      background-size: contain;
      width: 66 * @unit;
      height: 46 * @unit;
    }
  }
}

.container {
  height: 100%;
}

#mobileHome {
  width: 100vw;
  height: 100%;
  flex-direction: column;
  display: flex;
  .swiper-wrapper {
    flex: 1;
    margin-top: 170 * @unit;
    #banner {
      background: url("http://image.cheerby.cn/appImage/mobile/banner.jpg") no-repeat;
      position: relative;
      background-size: cover;
      width: 100vw;
      button {
        width: 520 * @unit;
        height: 135 * @unit;
        border-radius: @border-radius;
        font-size: 65 * @unit;
        color: @color-white;
        background-color: @green-button;
        position: absolute;
        bottom: 130 * @unit;
        right: 0;
        left: 0;
        margin: auto;
      }

    }
    #second {
      #phone {
        width: 100vw;
        height: 100%;
        .up-content {
          height: 250 * @unit;
          width: 100vw - 360 * @unit;
          margin: auto;
          border-bottom: 1px solid @color-grey;
          padding: 50 * @unit 0;

          position: relative;
          div {
            background-size: contain;
            background-repeat: no-repeat;
            width: 100%;
            height: 100% - 360 * @unit;
            transition: .3s;
            opacity: 0;
            position: absolute;
            &.active {
              opacity: 1;
            }
            &.to-leave {
              transition: none;
            }
            &.one {
              background-image: url("http://image.cheerby.cn/appImage/mobile/up-one.png");
            }
            &.two {
              background-image: url("http://image.cheerby.cn/appImage/mobile/up-two.png");
            }
            &.three {
              background-image: url("http://image.cheerby.cn/appImage/mobile/up-three.png");
            }
            &.four {
              background-image: url("http://image.cheerby.cn/appImage/mobile/up-four.png");
            }
          }
        }
        .down-content {
          height: 150 * @unit;
          width: 100vw - 360 * @unit;
          margin: auto;
          padding: 40 * @unit 0;

          position: relative;
          div {
            background-size: contain;
            background-repeat: no-repeat;
            width: 100%;
            height: 150 * @unit;
            transition: .3s;
            opacity: 0;
            position: absolute;
            &.active {
              opacity: 1;
            }
            &.to-leave {
              transition: none;
            }
            &.one {
              background-image: url("http://image.cheerby.cn/appImage/mobile/down-one.png");
            }
            &.two {
              background-image: url("http://image.cheerby.cn/appImage/mobile/down-two.png");
            }
            &.three {
              background-image: url("http://image.cheerby.cn/appImage/mobile/down-three.png");
            }
            &.four {
              background-image: url("http://image.cheerby.cn/appImage/mobile/down-four.png");
            }

          }
        }
        .icons-line {
          height: 100 * @unit;
          width: 100vw - 360 * @unit;
          margin: 50 * @unit auto;
          div {
            background-size: contain;
            background-repeat: no-repeat;
            width: 100 * @unit;
            height: 100%;
            float: left;
            margin-right: 40 * @unit;
            &.one {
              background-image: url("http://image.cheerby.cn/appImage/mobile/icons-one.png");
              &.active {
                background-image: url("http://image.cheerby.cn/appImage/mobile/icons-one-a.png");
              }
            }
            &.two {
              background-image: url("http://image.cheerby.cn/appImage/mobile/icons-two.png");
              &.active {
                background-image: url("http://image.cheerby.cn/appImage/mobile/icons-two-a.png");
              }

            }
            &.three {
              background-image: url("http://image.cheerby.cn/appImage/mobile/icons-three.png");
              &.active {
                background-image: url("http://image.cheerby.cn/appImage/mobile/icons-three-a.png");
              }

            }
            &.four {
              background-image: url("http://image.cheerby.cn/appImage/mobile/icons-four.png");
              &.active {
                background-image: url("http://image.cheerby.cn/appImage/mobile/icons-four-a.png");
              }

            }

          }
        }
        .phone-img {
          height: 1540 * @unit;
          width: 100vw - 510 * @unit;
          margin: auto;
          background-image: url("http://image.cheerby.cn/appImage/mobile/phone.png");
          background-size: contain;
          background-repeat: no-repeat;
          background-position: center top;
          margin-top: 6%;
          position: relative;
          div {
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center top;
            width: 100%;
            height: 100%;
            transition: .3s;
            opacity: 0;
            position: absolute;
            &.active {
              opacity: 1;
            }
            &.to-leave {
              transition: none;
            }
            &.one {
              background-image: url("http://image.cheerby.cn/appImage/mobile/phone-img-one.png");
            }
            &.two {
              background-image: url("http://image.cheerby.cn/appImage/mobile/phone-img-two.png");
            }
            &.three {
              background-image: url("http://image.cheerby.cn/appImage/mobile/phone-img-three.png");
            }
            &.four {
              background-image: url("http://image.cheerby.cn/appImage/mobile/phone-img-four.png");
            }
          }
        }
      }
    }
  }

}

#mobileCommunity {
  width: 100vw;
  height: 100%;
  margin-top: 170 * @unit;
  background-color: @bg-grey;
  #banner {
    height: 575 * @unit;
    width: 100%;
    background: url("http://image.cheerby.cn/appImage/mobile/homecover2.jpg") no-repeat;
    background-size: cover;
  }
  #wrap {
    margin: 35 * @unit 35 * @unit 0 35 * @unit;
    width: 100vw - 70 * @unit;
    .card {
      width: 100%;
      overflow: hidden;
      float: left;
      border: 1px solid @mobile-box;
      border-radius: @border-radius;
      box-sizing: border-box;
      padding: 30 * @unit;
      background-color: @color-white;
      margin-bottom: 35 * @unit;

      .article-title {
        font-size: 65 * @unit;
      }
      .info {
        text-align: left;
        height: 55 * @unit;
        line-height: 55 * @unit;
        margin-top: 40 * @unit;
        .author {
          display: inline-block;
          color: @green-dress;
          font-size: 55 * @unit;
        }
        span, time {
          color: @small-grey;

        }
        time {
          font-size: 50 * @unit;
        }
        .icon {
          color: @num-grey;
          height: 60 * @unit;
          vertical-align: middle;
          font-size: 35 * @unit;
          display: inline-block;
          float: right;
          margin-right: 20 * @unit;
        }
        .icons {
          display: inline-block;
          &.agree {
            background: url("http://image.cheerby.cn/appImage/mobile/4.png") no-repeat;
            width: 66 * @unit;
            height: 46 * @unit;
            background-size: contain;

          }
          &.read {
            background: url("http://image.cheerby.cn/appImage/mobile/1.png") no-repeat;
            width: 66 * @unit;
            height: 35 * @unit;
            margin-right: 20 * @unit;
            background-size: contain;
          }
          &.comment {
            background: url("http://image.cheerby.cn/appImage/mobile/2.png") no-repeat;
            width: 66 * @unit;
            height: 46 * @unit;
            background-size: contain;
          }
          &.share {
            background: url("http://image.cheerby.cn/appImage/mobile/3.png") no-repeat;
            background-size: contain;
            width: 66 * @unit;
            height: 46 * @unit;
          }
        }
      }
      .article-img {
        margin: 25 * @unit 0;
        float: left;
        img {
          float: left;
          width: 100%;
        }

      }
      .abstract {
        font-size: 50 * @unit;
        color: @num-grey;
        float: left;
      }
    }
  }
  #articleInfo {
    width: 100vw;
    margin: auto;
    background-color: @color-white;
    height: 100%;
    .kind {
      margin-left: 35 * @unit;
      width: 295 * @unit;
      height: 100 * @unit;
      line-height: 100 * @unit;
      font-size: 50 * @unit;
      float: left;
      background-color: @color-green-side;
      color: @color-white;
      margin-top: 70 * @unit;
    }
    .article-info {
      width: 100vw - 35 * @unit;
      padding: 77 * @unit;
      margin-left: 35 * @unit;
      float: left;
      border-top: 1px solid @mobile-box;
      box-sizing: border-box;
      .avator {
        float: left;
        border-radius: 50%;
        height: 230 * @unit;
        width: 230 * @unit;
      }
      .topic {
        font-size: 60 * @unit;
        font-weight: 400;
        margin-bottom: 70 * @unit;
      }
      .author {
        font-size: 45 * @unit;
        color: @small-grey;

      }

    }
    .article-content {
      margin: 35 * @unit 35 * @unit 0 35 * @unit;
      width: 100vw - 70 * @unit;
      float: left;
      img {
        width: 100%;
      }
      .icon-button {
        text-align: right;
        .green-button {
          height: 86 * @unit;
          border-radius: 15 * @unit;
          color: white;
          background-color: @color-green-side;
          line-height: 86 * @unit;
          font-size: 45 * @unit;
          cursor: pointer;
          text-align: center;
          margin-left: 22 * @unit;
          padding: 0 28 * @unit;
          &:hover {
            background-color: lighten(@color-green-font, 10%);
            transition: .3s;
          }
        }
        .return {
          float: left;
          resize: none;
          width: 100% - 40 * @unit;
          height: 400 * @unit;
          border: 1px solid @bg-grey;
          margin: 40 * @unit 0;
          padding: 20 * @unit;
        }
      }
      #comment {
        float: left;
        font-size: 50 * @unit;
        width: 100%;
        .comment-info {
          padding-top: 140 * @unit;
          padding-bottom: 30 * @unit;
          float: left;
          width: 100%;
          img {
            width: 180 * @unit;
            height: 180 * @unit;
            border-radius: 50%;
            margin-right: 60 * @unit;

            float: left;
          }
          .nick {
            color: @green-dress;
          }
          time {
            margin-left: 60 * @unit;
            color: @small-grey;
          }
          .comment-one {
            margin-top: 40 * @unit;
          }
          .add-comment {
            width: 100%;
            float: right;
            border-bottom: 2px solid @border-grey;
            padding-bottom: 16 * @unit;
            span {
              background: url("http://image.cheerby.cn/appImage/mobile/follow.png") no-repeat;
              background-size: contain;
              float: right;
              width: 100 * @unit;
              height: 90 * @unit;
            }
          }
          .return {
            margin-top: 50 * @unit;
            margin-left: 120 * @unit;
            width: 100% - 140 * @unit;
            float: right;
            textarea {
              margin-bottom: 30 * @unit;
              width: 100%;
              padding: 20 * @unit;
              height: 270 * @unit;
              border: 2px solid @border-grey;
              box-sizing: border-box;
              resize: none;
            }
            .green-button {
              width: 235 * @unit;
              height: 100 * @unit;
              font-size: 50 * @unit;
              color: @color-white;
              background-color: @green-button;
              float: right;
              border-radius: 15 * @unit;
            }
          }
        }
        .comment-follow {
          margin-left: 120 * @unit;
          width: 100% - 140 * @unit;
          float: right;
          .comm-item {
            width: 100%;
            float: left;
            margin: 10 * @unit;
          }
          .nick {
            color: @green-dress;
          }
          time {
            margin-left: 60 * @unit;
            color: @small-grey;
            float: right;
          }
        }
      }
    }
  }
}

#mobileAbout {
  width: 100vw;
  height: 100%;
  margin-top: 170 * @unit;
  #banner {
    width: 100vw;
    height: 600 * @unit;
    background: url("http://image.cheerby.cn/appImage/mobile/aboutcover2.jpg") no-repeat;
    background-size: cover;
  }
  #about {
    width: 100vw - 120 * @unit;
    padding: 95 * @unit 60 * @unit;
    .about-item {
      margin-bottom: 180 * @unit;
    }
    .about-title {
      width: 305 * @unit;
      height: 80 * @unit;
      margin-bottom: 60 * @unit;
      &.us {
        background: url("http://image.cheerby.cn/appImage/mobile/titleabout.png") no-repeat;
        background-size: contain;
      }
      &.event {
        background: url("http://image.cheerby.cn/appImage/mobile/titlehistory.png") no-repeat;
        background-size: contain;
      }
    }
    .about-content {
      text-indent: 2em;
      font-size: 40 * @unit;
    }
  }
  #footer {
    width: 100vw - 120 * @unit;
    margin: 0 60 * @unit;
    padding: 50 * @unit 0;
    font-size: 40 * @unit;
    text-align: center;
    border-top: 1px solid @footer-grey;

  }

}

#mobileHelp {
  width: 100vw;
  height: 100%;
  margin-top: 170 * @unit;
  #banner {
    width: 100vw;
    height: 270 * @unit;
    background: url("http://image.cheerby.cn/appImage/mobile/helptitle.jpg") no-repeat;
    background-size: contain;
  }
  #help {
    padding: 50 * @unit;
    width: 100vw - 100 * @unit;
    .qus-ans {
      margin-bottom: 80 * @unit;

      .qus {
        color: @color-green-side;
        font-size: 60 * @unit;
        margin-bottom: 40 * @unit;
        span {
          display: inline-block;
          width: 80 * @unit;
          height: 80 * @unit;
          border-radius: 100%;
          background-color: @color-green-side;
          color: @color-white;
          text-align: center;
          line-height: 82 * @unit;
        }
        .ans {
          text-indent: 2em;
          font-size: 40 * @unit;

        }

      }
    }
  }

}